<template>
  <div class="points-task-record">
    <el-card>
      <div class="record-header">
        <el-button type="default" size="small" @click="goBack" style="margin-right: 16px;">返回</el-button>
        <div class="record-info">
          <span class="record-title">任务：{{ taskName }}</span>
          <span class="record-count">共 {{ page.total }} 条记录</span>
        </div>
        <el-button type="primary" size="small" @click="exportRecordData" :icon="Download">导出Excel</el-button>
      </div>
      <el-table :data="tableData" border size="small" v-loading="loading">
        <el-table-column prop="user" label="用户" width="120" />
        <el-table-column prop="finishTime" label="完成时间" width="160" />
        <el-table-column prop="points" label="获得积分" width="100">
          <template #default="scope">
            <span class="points-text">{{ scope.row.points }} 积分</span>
          </template>
        </el-table-column>
        <el-table-column prop="exp" label="获得经验值" width="100">
          <template #default="scope">
            <span v-if="scope.row.exp > 0" class="exp-text">{{ scope.row.exp }} 经验</span>
            <span v-else class="no-exp">无</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip />
      </el-table>
      <el-pagination
        v-model:current-page="page.current"
        v-model:page-size="page.size"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50]"
        style="margin-top: 16px; text-align: right;"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Download } from '@element-plus/icons-vue'

const route = useRoute()
const taskId = ref(route.query.taskId || '')
const taskName = ref('')
const loading = ref(false)
const page = reactive({ current: 1, size: 5, total: 0 })
const allRecords = [
  { taskId: 'T001', user: '张三/1001', finishTime: '2024-06-10 10:00', points: 2, exp: 1, remark: '每日点赞' },
  { taskId: 'T002', user: '李四/1002', finishTime: '2024-06-11 14:20', points: 5, exp: 2, remark: '阅读文章' },
  { taskId: 'T001', user: '王五/1003', finishTime: '2024-06-12 09:30', points: 2, exp: 1, remark: '每日点赞' },
  { taskId: 'T003', user: '赵六/1004', finishTime: '2024-06-13 16:45', points: 10, exp: 5, remark: '完善个人资料' }
]
const allTasks = [
  { id: 'T100', name: '每日签到' },
  { id: 'T000', name: '注册奖励' },
  { id: 'T009', name: '首单奖励' },
  { id: 'T010', name: '完善资料奖励' },
  { id: 'T001', name: '每日点赞' },
  { id: 'T002', name: '阅读文章' },
  { id: 'T003', name: '站内分享' },
  { id: 'T004', name: '站外分享' },
  { id: 'T005', name: '商品评价' },
  { id: 'T006', name: '浏览商品' },
  { id: 'T007', name: '收藏商品' },
  { id: 'T008', name: '关注店铺' }
]
const tableData = ref<any[]>([])
const router = useRouter()

function loadRecordPage() {
  const records = allRecords.filter(r => r.taskId === taskId.value)
  page.total = records.length
  const start = (page.current - 1) * page.size
  tableData.value = records.slice(start, start + page.size)
}

function getTaskName() {
  const task = allTasks.find(t => t.id === taskId.value)
  taskName.value = task ? task.name : '未知任务'
}

function exportRecordData() {
  getTaskName()
  const data = tableData.value.map(record => ({
    '任务名称': taskName.value,
    '用户': record.user,
    '完成时间': record.finishTime,
    '获得积分': record.points,
    '获得经验值': record.exp,
    '备注': record.remark
  }))
  import('xlsx').then((XLSX) => {
    try {
      const ws = XLSX.utils.json_to_sheet(data)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, '任务完成记录')
      XLSX.writeFile(wb, `${taskName.value}完成记录.xlsx`)
      ElMessage.success('导出成功')
    } catch (error: any) {
      ElMessage.error('导出失败：' + error.message)
    }
  }).catch(() => {
    ElMessage.error('导出失败：XLSX库未安装')
  })
}

function goBack() {
  router.back()
}

onMounted(() => {
  if (route.query.taskId) {
    taskId.value = route.query.taskId as string
    getTaskName()
    loadRecordPage()
  }
})
watch(() => page.current, loadRecordPage)
</script>

<style scoped>
.points-task-record { padding: 32px; }
.record-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.record-info { display: flex; align-items: baseline; }
.record-title { font-size: 16px; font-weight: bold; margin-right: 10px; }
.record-count { font-size: 14px; color: #909399; }
.el-table .points-text { color: #f56c6c; font-weight: bold; }
.el-table .exp-text { color: #67c23a; font-weight: bold; }
.el-table .no-exp { color: #909399; }
</style> 